<template>
  <div class="cover-img-box" :class="coverSizeClass" :style="geBlurImgStyle" @click="clickImg">
    <img
      :src="coverSrc"
      :class="[imgClass, backdropFilter]"
      class="c-w100 c-h" :style="getImgStyle + getBorderRadius(borderRadius, borderRadiusDefalt, borderRadiusPosition)" alt="">
  </div>
</template>
<script>
import { customStyle } from '@/utils/customStyle.js'
import { DEFAULT_IMG_MAP } from '@/utils/constant.js';
export default {
  name: "CustomImg",
  mixins: [customStyle],
  props: {
    url: {
      type: String,
      default: ''
    },
    borderRadius: {
      type: Object,
      default: () => {}
    },
    borderRadiusPosition: {
      type: String,
      default: ''
    },
    borderRadiusDefalt: {
      type: String,
      default: '0' // 0.4rem
    },
    imageSetting: {
      type: Object,
      default: () => {}
    },
  },
  computed: {
    // cover自定义样式
    coverSizeClass() {
      return this.imageSetting && this.imageSetting.objectFit == 4 ? 'black-bg-003' : '';
    },
    // 封面图取值
    coverSrc() {
      return encodeURI(this.url) || DEFAULT_IMG_MAP[5]
    },
    // 设置图片周边虚化的style
    geBlurImgStyle() {
      return this.imageSetting && this.imageSetting.objectFit == 4 ? `background-image:url(${this.coverSrc})` : '';
    },
    // 设置图片样式
    getImgStyle() {
      return this.getImageObjectFit(this.imageSetting, 1);
    },
    // 设置封面样式过滤
    backdropFilter() {
      return this.imageSetting && this.imageSetting.objectFit == 4 ? 'c-object-fit-c bdFilter' : '';
    }
  },
  data() {
    return {
    };
  },
  watch: {
  },
  methods: {
    clickImg() {
      this.$emit("clickImg");
    },
  },
  mounted() {
  }
};
</script>

<style scoped>
.bdFilter {
  backdrop-filter: blur(4px);
}
.black-bg-003 {
  background-color: rgba(0, 0, 0, 0.03);
}
.cover-img-box{
  background-size: 400%;
  background-repeat: no-repeat;
  background-position: center center;
}
</style>
